<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="${ctx}/styles/css/main.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" type="text/css" media="all" href="${ctx}/styles/css/tipsy.css" />
<!--[if lt IE 9]>
	<link rel="stylesheet" type="text/css" href="${ctx}/styles/css/ie8.css" />
<![endif]-->
<script src="${ctxStatic}/jquery/jquery-2.0.2.min.js" type="text/javascript"></script>
<script type="text/javascript" src="${ctx}/js/custom-scripts.js"></script>
<script type="text/javascript" src="${ctx}/js/jquery.tipsy.js"></script> <!-- Tipsy -->
<script type="text/javascript">
$(document).ready(function(){
	universalPreloader();
});
$(window).load(function(){
	//remove Universal Preloader
	universalPreloaderRemove();
	rotate();
    dogRun();
	dogTalk();
	//Tipsy implementation
	$('.with-tooltip').tipsy({gravity: $.fn.tipsy.autoNS});
});
</script>
<title>404 - Not found</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<!-- Universal preloader -->
<div id="universal-preloader">
    <div class="preloader">
        <img src="${ctx}/images/universal-preloader.gif" alt="universal-preloader" class="universal-preloader-preloader" />
    </div>
</div>
<!-- Universal preloader -->
<div id="wrapper">
<!-- 404 graphic -->
	<div class="graphic"></div>
<!-- 404 graphic -->
<!-- Not found text -->
	<div class="not-found-text">
    	<h1 class="not-found-text">File not found, sorry!</h1>
    </div>
<!-- Not found text -->
<!-- search form -->
<!-- <div class="search"> -->
<!-- 	<form name="search" method="get" action="#" /> -->
<!--         <input type="text" name="search" value="Search ..." /> -->
<!--         <input class="with-tooltip" title="Search!" type="submit" name="submit" value="" /> -->
<!--     </form> -->
<!-- </div> -->
<!-- search form -->
<!-- top menu -->
<div class="top-menu">
	<a href="${ctx}" class="with-tooltip" title="Return to the home page">Home</a> | <a href="JavaScript:history.back();" class="with-tooltip" title="Navigate through our sitemap">返回</a> 
</div>
<!-- top menu -->
<div class="dog-wrapper">
<!-- dog running -->
	<div class="dog"></div>
<!-- dog running -->
<!-- dog bubble talking -->
	<div class="dog-bubble">
    </div>
    <!-- The dog bubble rotates these -->
    <div class="bubble-options">
    	<p class="dog-bubble">
        	Are you lost, bud? No worries, I'm an excellent guide!
        </p>
    	<p class="dog-bubble">
	        <br />
        	Arf! Arf!
        </p>
        <p class="dog-bubble">
        	<br />
        	Don't worry! I'm on it!
        </p>
        <p class="dog-bubble">
        	I wish I had a cookie<br /><img style="margin-top:8px" src="${ctx}/images/cookie.png" alt="cookie" />
        </p>
        <p class="dog-bubble">
        	<br />
        	Geez! This is pretty tiresome!
        </p>
        <p class="dog-bubble">
        	<br />
        	Am I getting close?
        </p>
        <p class="dog-bubble">
        	Or am I just going in circles? Nah...
        </p>
        <p class="dog-bubble">
        	<br />
            OK, I'm officially lost now...
        </p>
        <p class="dog-bubble">
        	I think I saw a <br /><img style="margin-top:8px" src="${ctx}/images/cat.png" alt="cat" />
        </p>
        <p class="dog-bubble">
        	What are we supposed to be looking for, anyway? @_@
        </p>
    </div>
    <!-- The dog bubble rotates these -->
<!-- dog bubble talking -->
</div>
<!-- planet at the bottom -->
	<div class="planet"></div>
<!-- planet at the bottom -->
</div>
</body>
</html>